<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: 'erify' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>离职审核</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :stripe="true"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="attend"
          label="出勤"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.attend }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="achieve"
          label="绩效"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.achieve }}</span>
          </template>
        </el-table-column>
         <el-table-column
          prop="state"
          label="状态"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
          </template>
        </el-table-column>
         <el-table-column
          prop="submit"
          label="提交者"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.submit }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-delete"
              @click="handleDelete(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">批量删除选中内容</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        
        {
          id:'0',
          date: "2021-05-02",
          name: "王小虎",
          attend: "是",
          achieve:"优",
          state: "等待审核",
          submit:"王主任",
        },
        {
          id:'1',
          date: "2021-05-02",
          name: "林大哥",
          attend: "是",
          achieve:"优",
          state: "等待审核",
          submit:"王主任",
        },
        {
          id:'2',
          date: "2021-05-03",
          name: "小猪猪",
          attend: "是",
          achieve:"优",
          state: "等待审核",
          submit:"王主任",
        },
        {
          id:'3',
          date: "2021-05-04",
          name: "夏洛克",
          attend: "是",
          achieve:"优",
          state: "等待审核",
          submit:"王主任",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
      this.$message({
        type: "success",
        message: "审核离职成功",
      });
    },
    toggleSelection() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.tableData.splice(this.multipleSelection[i].id,1);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
</style>